/* 搜索 */
.search {
    width: 100%;
    background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
    padding: 1em 0em;

    .box {
        display: flex;
        justify-content: space-between;
        background: #fff;
        width: 97%;
        margin: 0 auto;
        border-radius: 20px;
        height: 35px;
        line-height: 35px;
        overflow: hidden;

        .icon {
            margin-left: 0.8em;
            padding-top: 0.12em;
        }

        .input {
            width: 70%;
            height: 100%;
            padding-left: 10px;
        }

        .btn {
            margin: 0;
            width: 25%;
            background: #4ea9f5;
            color: #fff;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

/* 分类 */
.type {
    width: 100%;
    background: #fff;
    margin-bottom: 10px;

    .list {
        width: 100%;
        display: flex;
        overflow-x: scroll;

        /*修改滚动条样式*/
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 3px;
        }

        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background-color: rgba(59, 171, 94, 1);
            background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
            );
        }

        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            // background: linear-gradient(rgb(1,115,222), rgb(78,169,245));
        }

        .item {
            width: 20%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex-shrink: 0;
            font-weight: bold;
        }

        .item.active {
            color: rgba(59, 171, 94, 1);
        }
    }
}

/* 列表 */
.contact {
    width: 100%;
    height: 82vh;
    overflow-y: scroll;
    padding-bottom: 6em;

    &::-webkit-scrollbar {
        width: 3px;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        border-radius: 1em;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(59, 171, 94, 1);
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        border-radius: 1em;
    }

    .list {
        width: 95%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;

        .item {
            background: #fff;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 3px;
            margin-bottom: 10px;
            padding: 1.5em 1.2em;

            .icon {
                width: 20px;
                height: 20px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                width: 80%;
                overflow: hidden;

                .title {
                    a {
                        font-weight: bold;
                        font-size: 1.2em;
                        margin-bottom: 0.3em;
                        color: #123;
                    }
                }

                .info {
                    display: flex;
                    color: #6c6c6c;
                    font-size: 0.9em;
                    align-items: flex-start;

                    .icon {
                        margin-right: 0.3em;
                        flex-shrink: 0;
                    }

                    .desc {
                        margin-top: 0.1em;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}

.contact .list .item .operation {
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

/* 覆盖返回顶部的样式 */
.mescroll-totop {
    bottom: 100px;
}
